<template>
  <div >
    <div>
      <div class="top-sx">
        <ul>
          <li>
            <span>时间:</span>
            <a-date-picker @change="conditionChange" placeholder="请选择日期" v-model:value="pagingObj.selectTime"/>
          </li>
          <li>
            <span>快递类型:</span>
            <a-select
                ref="select"
                v-model:value="pagingObj.deliveryStatus"
                style="width: 120px"
                @focus="focus"
                @change="conditionChange">
              <a-select-option value="圆通快递">圆通快递</a-select-option>
              <a-select-option value="邮政快递">邮政快递</a-select-option>
            </a-select>
          </li>
          <li>
            <a-button type="primary" @click="searchDelivery">搜索</a-button>
          </li>
        </ul>
      </div>
    </div>
    <ul>
      <li v-for="(item,index) in deData" :key="index+'de'">
        <a-card>
          <div class="content">
            <div class="item">
              <div class="title">
                <h3>【{{ item.userNick }}】-{{ item.building }}</h3>
                <h3>【{{ item.type }}】-{{ item.suggest }}</h3>
              </div>
              <div class="price">
                <h2>￥{{ item.price }}</h2>
              </div>
              <div class="status">
                <a-tag v-if="item.status==1" color="#87d068">
                  未完成
                </a-tag>
                <a-tag v-if="item.status==2" color="#cd201f">
                  已完成
                </a-tag>
              </div>
            </div>
            <div class="endTime">
              <h3 style="display: inline-block">【截止时间】</h3><span style="color: red">{{ item.endTime }}</span>
            </div>
          </div>
        </a-card>
      </li>
    </ul>
    <div>
      <a-empty description="无数据" v-if="deData.length==0" />
      <a-pagination
          v-model:current="pagingObj.page"
          v-model:page-size="pagingObj.limit"
          :total="pagingObj.totalCount"
          @change="pageChange"/>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import {PlusOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
export default {
  components:{
    PlusOutlined
  },
  name: "myReceiveTask",
  data() {
    return {
      deData: [],
      pagingObj: {
        selectTime: '',
        deliveryStatus: '',
        page: 1,
        limit: 5,
        totalCount: 0,
        totalPage: 0
      }
    }
  },
  methods: {
    conditionChange(){
      this.getListData()
    },
    searchDelivery() {
      this.getListData()
    },
    pageChange(current, pageSize) {
      this.getListData()
    },
    getListData() {
      this.$httpPost("xy/delivery/receiveListTask", this.pagingObj).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          let page = res.data.page;
          this.pagingObj.page = page.currPage
          this.pagingObj.totalCount = page.totalCount
          this.pagingObj.totalPage = page.totalPage
          this.deData = page.list
        }
      })
    }
  },
  created() {
    this.getListData()
  }
}
</script>

<style scoped>
.top-sx {
  background-color: aliceblue;
}

.top-sx ul li {
  display: inline-block;
  margin-right: 20px;
  height: 40px;
}

.content {
  /*解决孩子使用margin带动父亲移动的问题*/
  overflow: hidden;
  height: 140px;
  background-color: #e8e8e8;
}

.item {
  height: 80px;
  margin: 10px 0 10px 0;
}

.title {
  float: left;
  width: 450px;
  height: 60px;
  margin: 10px 0;
}

.price {
  float: left;
  height: 60px;
  width: 150px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}

.price h2 {
  color: red;
}

.status {
  width: 100px;
  float: left;
  height: 60px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}

.btn {
  width: 150px;
  float: left;
  height: 60px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}

.endTime {
  width: 250px;
  float: left;
}
</style>